<style lang='scss' scoped>
.swiper {
  width: 100%;
  height: 100%;
  .swiper-item {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
    .btn {
      position: absolute;
      bottom: 120px;
      left: 50%;
      transform: translateX(-50%);
      width: 90px;
    }
  }
}
.pup {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    img {
        width: 100%;
        height: 100%;
    }
}
</style>

<template>
  <div>
    <div class="pup" v-if="advertShow">
        <img src="../../images/guide/play.png" alt="">
    </div>
    <van-swipe class="swiper" :show-indicators='false' :loop='false'>
      <van-swipe-item class="swiper-item">
        <img src="../../images/guide/guide1.png" alt="" />
      </van-swipe-item>
      <van-swipe-item class="swiper-item">
        <img src="../../images/guide/guide2.png" alt="" />
      </van-swipe-item>
      <van-swipe-item class="swiper-item">
        <img src="../../images/guide/guide3.png" alt="" />
      </van-swipe-item>
      <van-swipe-item class="swiper-item">
        <img src="../../images/guide/guide4.png" alt="" />
      </van-swipe-item>
      <van-swipe-item class="swiper-item">
        <img src="../../images/guide/guide5.png" alt="" />
        <el-button type="primary" class="btn" @click="router.push('/home')">立即进入</el-button>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const advertShow = ref(true)
setTimeout(() => {
  advertShow.value = false
}, 3000)
</script>   